<template>
	<view>
		<view class="list" v-if="datalist.length>0">
			<view class="li" v-for="(item,index) in datalist" :key="index">
				<view class="shop">
					<image :src="item.image":lazy-load="true" mode="aspectFill"></image>
					<view class="msg">
						<view class="name black">{{item.goodsName}}</view>
						<view v-for="(item1,index1) in item.sku" :key="index1">
							
							<view class="sizr gray " v-if="index1==0">颜色：{{item1.split(":")[1]}}</view>
							<view class="sizr gray " v-if="index1==1">尺码：{{item1.split(":")[1]}}</view>
						</view>
					</view>
				</view>
				<view class="genre">
					共1件
					<view class="price">
						合计： 
						<text>¥{{item.orderPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pagination" v-if="pagination">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
		<view v-else class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
	</view>
</template>

<script>
	import order from '../../../servers/agent/order/orderfind.js';
export default {
	data() {
		return {
			datalist:[],
			params:'',
			paging: {
				page: 1,
				total: 100
			},
			pagination:true
		};
	},
	onLoad(option) {
		if(option.arr){
			this.params=JSON.parse(option.arr)
		}
	},
	mounted() {
		
		this.getlist();
	},
	methods: {
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.getlist();
			}
			
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getlist();
			}
			
		},
		getlist(){
			uni.showLoading({
			    title: '数据加载中'
			});
			this.params.currentPage=this.paging.page
			this.params.pageSize=10
			
			order.search(this.params).then(res => {				 
				if(res.code == 200){
					if(res.data.records.length>0){
						uni.hideLoading();
						console.log(res.data)
						this.datalist=res.data.records
						this.paging.total = Math.ceil(res.data.total / res.data.size);
						this.datalist=res.data.records.map(v => {
							v.image = this.imgCDNUrl + v.productImg;
							console.log(v)
							var sku = [];
							if (v.productSkuDesp) {
								sku = v.productSkuDesp.split(",");
							}
							v.sku = sku;
							
							return v;
						});
						this.pagination=true
					}else{
						this.pagination=false
					}
					
					
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				
					
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});	
			
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	padding: 0 20rpx;
	background: #ffffff;
	.li {
		padding: 50rpx 0;
		border-bottom: 1px solid #e1e1e1;
		.shop {
			position: relative;
			display: flex;
			flex-direction: row;
			image {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
			}
			.msg {
				width: 431rpx;
				margin-left: 37rpx;
				line-height: 46rpx;
				.name {
					font-size: 28rpx;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.type {
					font-size: 26rpx;
				}
				.gray {
					color: #999999;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}
		}
		.genre {
			padding-top: 54rpx;
			text-align: right;
			color: #999999;
			font-size: 26rpx;
			.price {
				display: inline-block;
				color: #333333;
				margin-left: 29rpx;
				text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
	
}
</style>
